<template>
	<view class="mine_container">
		<p class="fixed_right">id:{{ userInfo.id }}</p>
		<view class="top">
			<view class="mine-info">
				<view class="avatar" @click="toUser">
					<image class="img" :src="userInfo.avatar" mode="aspectFill"></image>
				</view>
				<view class="name">
					<view class="flex">
						<text @click="toUser">{{ userInfo.nickname }}</text>
						<view class="flex mt_20" @click="toPayFor">
							<u-icon name="integral-fill" :color="userInfo.user_type === 1 ? '#ff0011' : '#ccc'"
								size="20"></u-icon>
							<text :class="userInfo.user_type === 1 ? 'payMoney' : 'payMoneyNo'">
								VIP
							</text>
						</view>
					</view>
					<view class="vipWord mt_20" v-if="userInfo.vip">
						会员到期时间 : {{ userInfo.vip.end_date }}
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box-container">
				<u-cell-group :border="false">
					<u-cell :title="`我的消息`" :isLink="true" @click="MinMessage">
						<template slot="icon">
							<u-icon name="chat-fill" color="#D95858" size="30"></u-icon>
						</template>
						<template slot="value">
							<view style="color: #ff0011">{{ value }}</view>
						</template>
						<template slot="right-icon">
							<u-icon name="arrow-right" color="#909399" size="16">
								<u-badge :isDot="true" type="info"> </u-badge>
							</u-icon>
						</template>
					</u-cell>
					<u-cell title="当前版本" :isLink="true" @click="currentVersion">
						<template slot="icon">
							<i class="iconfont icon-dangqianbanben" style="color: #668a18"></i>
						</template>
						<template slot="value">
							<view :style="versionValueStyle">{{ versionValue }}</view>
						</template>
					</u-cell>
					<u-cell title="联系我们" :isLink="true" @click="ContactUs">
						<template slot="icon">
							<i class="iconfont icon-lianxiwomen" style="color: #ffa100"></i>
						</template>
					</u-cell>
					<u-cell title="使用教程" :isLink="true" @click="useInfo(1)">
						<template slot="icon">
							<i class="iconfont icon-shiyongjiaocheng" style="color: #007aff"></i>
						</template>
					</u-cell>
					<u-cell title="常见问题" :isLink="true" @click="question(2)">
						<template slot="icon">
							<i class="iconfont icon-changjianwenti" style="color: #dd7525"></i>
						</template>
					</u-cell>
					<u-cell title="关于我们" :isLink="true" @click="aboutUs">
						<template slot="icon">
							<i class="iconfont icon-guanyuwomen" style="color: #ff0011"></i>
						</template>
					</u-cell>
					<u-cell title="更多设置" :isLink="true" @click="moreSetting">
						<template slot="icon">
							<u-icon name="setting-fill" color="#000" size="30"></u-icon>
						</template>
					</u-cell>
				</u-cell-group>
				<divider :lineHeight="`10`" :lineColor="`#f0f0f0`"></divider>
				<u-cell-group :border="false">
					<u-cell title="退出登录" :isLink="true" @click="logout">
						<template slot="icon">
							<i class="iconfont icon-tuichu" style="color: #cccccc"></i>
						</template>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<u-toast ref="uToast1" />
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<u-modal :show="downLoadShow" title="下载进度" ref="uModal" :asyncClose="true" :showConfirmButton="false">
			<view class="slot-content" style="width: 100%">
				<u-line-progress :percentage="downLoadValue" activeColor="#ff0000"
					style="width: 100%"></u-line-progress>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		logout,
		getUpdateWgt
	} from "@/common/api/index";
	import divider from "@/components/divider/divider";
	import globalFunc from "@/mixins/globalFunc.js";

	export default {
		name: "",
		mixins: [globalFunc],
		components: {
			divider,
		},
		data() {
			return {
				type: "warning",
				//   userInfo: "",
				pageLoading: false,
				versionValue: "", //app当前版本号
				systemValue: "", //当前手机系统
				suspensionList: [],
				downLoadValue: 0,
				downLoadShow: false,
				versionValueStyle: {
					color: "#999",
				},
			};
		},
		async onShow() {
			await this.getAppInfo();
			await this.getUserInfo();
			await this.getVersion();
			await this.getCurrent();
		},
		computed: {
			value() {
				return this.$store.state.messageValue;
			},
			userInfo() {
				return this.$store.state.userInfo;
			},
		},
		methods: {
			MinMessage() {
				uni.navigateTo({
					url: "/pages/mine/minMessage",
				});
			},
			aboutUs() {
				uni.navigateTo({
					url: `/pages/mine/aboutUs?name=about`,
				});
			},
			moreSetting() {
				uni.navigateTo({
					url: "/pages/mine/moreSetting",
				});
			},
			ContactUs() {
				uni.navigateTo({
					url: "/pages/mine/ContactUs",
				});
			},
			toUser() {
				uni.navigateTo({
					url: "/pages/mine/updateUserInfo/updateUserInfo",
				});
			},
			// 版本升级更新
			currentVersion() {
				let that = this;
				const osName = uni.getSystemInfoSync().osName;
				plus.runtime.getProperty(plus.runtime.appid, async (appInfo) => {
					let newVersion = that.$store.state.appData.wgt_version;
					let onLineVersion = appInfo.version;
					if (newVersion > onLineVersion) {
						uni.showModal({
							title: "提示",
							content: "检测到新版本，是否更新",
							cancelText: "取消",
							confirmText: "确定",
							success: async function(res) {
								if (res.confirm) {
									// 更新
									let result = await getUpdateWgt({
										os: osName,
									});
									if (result.code === 1) {
										that.upgradation(result.data.download);
									} else {
										that.showMsg(result.msg);
									}
								} else if (res.cancel) {
									this.$refs.uToast1.show({
										message: "用户点击取消",
										duration: 2000,
										position: "top",
									});
								}
							},
						});
					} else {
						this.$refs.uToast1.show({
							message: "当前是最新版本",
							duration: 2000,
							position: "top",
						});
					}
				});
			},
			async getCurrent() {
				let that = this;
				plus.runtime.getProperty(plus.runtime.appid, async (appInfo) => {
					let newVersion = that.$store.state.appData.wgt_version;
					let onLineVersion = appInfo.version;
					if (newVersion > onLineVersion) {
						that.versionValueStyle.color = "#ff0011";
					} else {
						that.versionValueStyle.color = "#999";
					}
				});
			},
			// 更新
			upgradation(url) {
				let that = this;
				let downloadProgress = uni.downloadFile({
					url: url, //内容是一个.wgt包
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							// 下载更新文件成功后进行安装
							plus.runtime.install(
								downloadResult.tempFilePath, {
									force: true, // 是否强制安装, 如果将要安装应用的版本号不高于现有应用的版本号则终止安装，并返回安装失败。
								},
								function() {
									uni.showToast({
										title: "更新完毕，即将重启",
										icon: "none",
										position: "bottom",
									});
									plus.runtime.restart(); // 安装完成后重启应用
								},
								function() {
									uni.showToast({
										title: "更新失败",
										icon: "none",
										position: "bottom",
									});
									setTimeout(() => {
										plus.runtime.restart(); // 重启应用
									}, 1000);
								}
							);
						}
					},
				});
				// 获取下载进度
				downloadProgress.onProgressUpdate((res) => {
					// 下载进度百分比res.progress + "%"
					that.downLoadValue = res.progress;
					that.downLoadShow = true;
				});
			},
			getVersion() {
				let that = this;
				plus.runtime.getProperty(plus.runtime.appid, (appInfo) => {
					that.versionValue = appInfo.version;
				});
				let brand = uni.getSystemInfoSync();
				that.systemValue = brand.android;
			},
			/*   使用教程    */
			async useInfo(id) {
				uni.navigateTo({
					url: `/pages/mine/UsingTutorials?id=${id}`,
				});
			},
			/*   常见问题    */
			async question(id) {
				uni.navigateTo({
					url: `/pages/mine/currentVersion?id=${id}`,
				});
			},
			/*   退出登录    */
			async logout() {
				const res = await logout();
				if (res.code === 1) {
					uni.showToast({
						title: "退出成功",
						icon: "success",
						duration: 1000,
					});
					uni.clearStorageSync();
					// uni.removeStorageSync("token");
					uni.reLaunch({
						url: "/pages/login/login",
					});
				} else {
					this.$refs.uToast1.show({
						message: res.msg,
						type: "error",
						duration: 2000,
						position: "top",
					});
				}
			},
			// 跳转支付
			toPayFor() {
				uni.navigateTo({
					url: "/pages/payVip/payVip",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mine_container {
		background-color: #f0f0f0;
		min-height: 100vh;

		.fixed_right {
			color: #ccc;
			font-size: 30rpx;
			position: fixed;
			top: 10rpx;
			right: 10rpx;
		}

		.top {
			height: 260rpx;
			background-color: #fff;
			padding: 0 20rpx 0 40rpx;

			.mine-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100%;
				padding-left: 20rpx;

				.avatar {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.qrCode {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					font-size: 40rpx;
					font-weight: 600;
					flex: 1;
					padding-left: 20rpx;

					p {
						align-items: center;
						//   width: 300rpx;
						flex-wrap: wrap;
					}

					.payMoney {
						margin-left: 10rpx;
						color: #ff0011;
						font-size: 26rpx;
						font-weight: 500;
					}

					.payMoneyNo {
						margin-left: 10rpx;
						color: #ccc;
						font-size: 26rpx;
						font-weight: 500;
					}

					.vipWord {
						color: #ccc;
						font-size: 26rpx;
					}
				}
			}
		}

		.content {
			// min-height: calc(100vh - 400rpx);
			padding: 50rpx;
			box-sizing: border-box;

			.box-container {
				border-radius: 20rpx;
				background-color: #fff;
				height: 100%;
				width: 100%;
				padding: 20rpx 0;
				box-sizing: border-box;
				overflow: scroll;
			}
		}
	}

	.iconfont {
		font-size: 26px;
		font-weight: bold;
	}

	.margin-bottom-20 {
		margin-bottom: 20rpx;
	}

	.mt_20 {
		margin-top: 10rpx;
	}
</style>